import React from "react";
import {
    createBrowserRouter,
    createHashRouter,
    RouterProvider
} from "react-router-dom";
import CircularProgress from '@mui/material/CircularProgress';
import ChatPageWrapper from "../view/pages/chat/ChatPage.jsx";


const HomePage = React.lazy(() => import('../view/pages/home/Dashboard.jsx'))

const Login = React.lazy(() => import('../view/Login.jsx'))
const NotFound = React.lazy(() => import('../view/NotFound.jsx'))
// const SignInPage = React.lazy(() => import('./pages/Auth/SignIn'))


const Loading = () => {
    return (
        <CircularProgress />
    )
}


// https://baimingxuan.github.io/react-router6-doc/route/loader#loader
// https://stackoverflow.com/questions/73984257/how-to-use-suspense-with-routerprovider-in-react-router-dom-v6-4
// const router = createBrowserRouter([
const router = createHashRouter([
    {
        // errorElement: <ErrorBoundary />,
        // errorElement: <ErrorBoundary2 />,
        // https://stackoverflow.com/questions/77088474/react-router-6-errorelement-not-rendering-an-error-component

        children: [
            {
                path: "/dashboard/*",
                element:
                    <React.Suspense fallback={<Loading />}>
                        <HomePage />
                    </React.Suspense>
                ,
            }
            , {
                path: "/chatlocal",
                element: <React.Suspense fallback={<Loading />}>
                    <ChatPageWrapper />
                </React.Suspense>,
            },
            , {
                path: "/login",
                element: <React.Suspense fallback={<Loading />}>
                    <Login />
                </React.Suspense>,
            },
            , {
                path: "*",
                element: <NotFound />,
            },
        ]
    }
]);



export default function () {
    return <RouterProvider router={router} />
}
